<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag-interact</title>
    <script src="../javascripts/interact.js"></script>
</head>
<style>
    .resize-drag {
        background-color: #29e;
        color: white;
        font-size: 20px;
        font-family: sans-serif;
        border-radius: 8px;

        width: 120px;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;

        /* This makes things *much* easier */
        box-sizing: border-box;
        border-left: 10px solid red;
    }

    .resize-container {
        width: 100%;
        height: 240px;
    }

    .frame-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        background: red;
        opacity: .5;
        top: 0;
        left: 0;
        z-index: 20;
    }

    .frame-cover2 {
        position: fixed;
        width: 100%;
        height: 100%;
        background: pink;
        opacity: .5;
        top: 0;
        left: 0;
        z-index: 99;
    }
</style>
<body>
<iframe src="http://www.baidu.com" frameborder="0" style="width: 600px;height: 600px;"></iframe>
<div>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
</div>
<div class="resize-container">
    <div class="resize-drag">
        <iframe src="http://www.163.com" frameborder="0" style="width: 100%;height: 100%;"></iframe>
    </div>
</div>
</body>
</html>
<script>
    interact('.resize-drag')
        .draggable({
            onmove: window.dragMoveListener
        })
        .resizable({
            preserveAspectRatio: false,
            edges: {left: true, right: false, bottom: false, top: false},
            squareResize: false
        })
        .on('resizestart', function (e) {
            var div = document.createElement('div');
            div.className = 'frame-cover';
            var div2 = document.createElement('div');
            div2.className = 'frame-cover2';
            var body = document.getElementsByTagName('body')[0];
            e.target.appendChild(div);
            body.appendChild(div2);
            console.log('start');
        })
        .on('resizemove', function (event) {
            var target = event.target,
                x = (parseFloat(target.getAttribute('data-x')) || 0),
                y = (parseFloat(target.getAttribute('data-y')) || 0);
            // update the element's style
            target.style.width = event.rect.width + 'px';
            target.style.height = event.rect.height + 'px';
            /*
            // translate when resizing from top or left edges
            x += event.deltaRect.left;
            y += event.deltaRect.top;
            target.style.webkitTransform = target.style.transform =
                'translate(' + x + 'px,' + y + 'px)';
            target.setAttribute('data-x', x);
            target.setAttribute('data-y', y);
            target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);*/
        })
        .on('resizeend', function (e) {
            e.target.removeChild(document.getElementsByClassName('frame-cover')[0]);
            var body = document.getElementsByTagName('body')[0];
            body.removeChild(document.getElementsByClassName('frame-cover2')[0]);
            console.log('end');
        })
    ;
</script>